<template>
    <div>
      <div style="display: -webkit-flex;display: flex;">

        <el-card class="box-card" >

          <div id="box">
            <div >
              <h4 style="font-family: STLiti,serif;color: #2C9FAF">SHOSPITAL</h4>
              <div style="text-align: center"><h2 >门诊处方笺</h2></div>
            </div>
            <el-descriptions title="患者信息">
              <el-descriptions-item label="处方号">{{value2.id}}</el-descriptions-item>
              <el-descriptions-item label="科室">{{value2.department.name}}</el-descriptions-item>
              <el-descriptions-item label="日期">{{value2.createTime}}</el-descriptions-item>
              <el-descriptions-item label="姓名">{{value2.medicalCard.name}}</el-descriptions-item>
              <el-descriptions-item label="性别">{{value2.medicalCard.sex}}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{value2.medicalCard.sex}}</el-descriptions-item>
              <el-descriptions-item label="初步诊断">{{value2.outpatients.chiefComplaint}}</el-descriptions-item>
            </el-descriptions>

            <div style="display: flex">
              <div style="font-size: 1.1rem">
                <img style="width: 70px;height: 70px"
                     :src="require('@/assets/prescription.png')">
              </div>
            </div>

            <div style="margin: 20px 0 0 185px;" >
              <ul>
                  <li v-for="site in prescriptionDrugs" >
                  {{ site.drug.name }}&nbsp{{site.num}}{{site.drug.unit}}
                  </li>
              </ul>
            </div>
            <div style="display: flex;margin: 200px 0 0 0;height: 300px" >
              <el-descriptions>
                <el-descriptions-item label="医嘱">{{value2.outpatients.advice}}</el-descriptions-item>
                <el-descriptions-item label="医师">{{value2.user.name}}</el-descriptions-item>
                <el-descriptions-item label="药费">{{Prescription.totalPrice}}</el-descriptions-item>

              </el-descriptions>
            </div>
          </div>

        </el-card>
        <div v-print="'#box'" style="color: cornflowerblue">打印</div>
        <div style="margin-left: 10px">
          <h3 style="margin-left: 120px">收费</h3>
          <el-form :inline="true" :model="Prescription" class="demo-form-inline">
            <el-form-item>
              <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="请输入就诊卡号" v-model="medicalCard.id"></el-input>
            </el-form-item>
            <el-select v-model="payStatus" placeholder="请选择">
              <el-option
                  v-for="item in value1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

          <el-table
              ref="singleTable"
              :data="prescription"
              highlight-current-row
              @current-change="handleCurrentChange"
              style="width: 100%"
              height="300">
            <el-table-column
                prop="id"
                label="处方号"
                width="150">
            </el-table-column>
            <el-table-column
                prop="medicalCard.name"
                label="患者"
                width="150">
            </el-table-column>
            <el-table-column
                prop="medicalCard.sex"
                label="性别"
                width="80">
            </el-table-column>
            <el-table-column
                prop="user.name"
                label="医生"
                width="150">
            </el-table-column>
            <el-table-column
                prop="department.name"
                label="科室"
                width="150">
            </el-table-column>
            <el-table-column prop="payStatus" label="缴费状态" width="120" fixed="right">
              <template #default="scope">
                <el-tag v-if="scope.row.payStatus" type="success">已缴费</el-tag>
                <el-tag v-else type="danger">未缴费</el-tag>
              </template>
            </el-table-column>
          </el-table>
            应付金额：
            <el-form-item>
              <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="应付金额" v-model="Prescription.totalPrice"></el-input>
            </el-form-item><br>
            实付金额：
            <el-form-item>
              <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="实付金额" v-model="Prescription.revPrice" @input="getBack"></el-input>
            </el-form-item><br>
            找回金额：
            <el-form-item>
              <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="应找回金额" v-model="Prescription.backPrice"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="toUpdate">缴费</el-button>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "ChargeOutpatients",
  data(){
    return{
      formLabelWidth:'120px',
      payStatus:'',
      value1:[
        {
          label:'未收费',
          value:false
        },
        {
          label:'已收费',
          value:true
        }
      ],
      prescription:[
        {
          user:'',
          department:'',
          medicalCard:'',
          outpatients:''
        }
      ],

      user:{
        name:'',
      },
      department:{
        name:''
      },
      medicalCard: {
        id:'',
        name:'',
        sex:'',
        telephone:'',
        idCard:'',
        email:''
      },
      outpatients:{
        id:'',
        mid:'',
        diagnosis:'',
        chiefComplaint:'',
        advice:'',
        uid:'',
        preId:'',
        iid:'',
        rid:'',
        enabled:''
      },
      value2:{
        outpatients:'',
        medicalCard:'',
        user:'',
        department:''
      },
      drugs: {
        prescriptionDrugs:''
      },
      prescriptionDrugs:[
        {
          num:'',
          drug:''
        }
      ],
      drug:{
        id:'',
        name:'',
        specification:'',
        unit:'',
        num:''
      },
      Prescription:{
        id:'',
        totalPrice: '',
        revPrice: '',
        backPrice: '',
      }

    }
  },
  methods:{
    //将信息写入取药单
    handleCurrentChange(index){
      this.value2='';
      this.value2=index;
      this.getRequest("/charge/getDrugsByPreId?preId="+index.id).then(resp=>{
        if(resp){
           this.prescriptionDrugs='';
           this.drugs=resp.obj;
           this.prescriptionDrugs=this.drugs.prescriptionDrugs;
           console.log(this.drugs.prescriptionDrugs);
          this.getRequest("/charge/getPrice?preId="+index.id).then(res=>{
            this.Prescription.id=index.id;
            this.Prescription.totalPrice=res.obj;
          })

        }
      })


    },
    //获取处方信息
    onSubmit(){
      this.getRequest('/charge/getMes?mid='+this.medicalCard.id+'&payStatus='+this.payStatus).then(resp=>{
        if(resp){
          console.log(resp)
          this.prescription=resp;
        }
      })
    },
    //缴费
    toUpdate(){
      this.$confirm('此操作将完成缴费, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.putRequest("/charge/updatePrescription",this.Prescription).then(resp=>{
          if(resp){
            this.onSubmit();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消缴费'
        });
      });

    },
    //找零
    getBack(){
      this.Prescription.backPrice=this.Prescription.revPrice-this.Prescription.totalPrice;
    }

  }
}
</script>

<style scoped>
.box-card {
  width: 800px;
  height: 800px;
}
</style>